<template>
    <div class="page-content-wrap">
        <page-title></page-title>
        <div class="page-content" style="padding: 0;">
            <el-tabs v-model="activeName" class="flex-tabs" type="border-card">
                <el-tab-pane label="安全设置" name="1" lazy>
                    <div class="info-wrap">
                        <div style="display:flex;justify-content:space-between">
                            <div class="info-title">密码规则设置</div>
                            <span style="line-height: 30px;cursor:pointer" v-if="show1" @click="show1=!show1">
                                收起
                                <i class="icon el-icon-caret-top "></i>
                            </span>
                            <span style="line-height: 30px;cursor:pointer" v-else @click="show1=!show1">
                                展开
                                <i class="icon el-icon-caret-bottom"></i>
                            </span>

                        </div>
                        <div class="info-sub-til">
                            企业管理员可以根据企业自己的安全策略，配置成员登录的密码规则，要求员工按照规则输入符合规范的密码；一旦设置好规则之后，已有成员登录时会提示重置密码，新老加入成员均需按照规则来设置密码
                        </div>
                        <div v-show="show1">

                            <div class="info-cont">
                                <el-form :model="ruleForm0" :rules="rule0" ref="form0" label-width="120px">
                                    <el-form-item label="密码规则：" prop="code">
                                        <select-para :options="sysParaObj['PASS_CODE']" v-model="ruleForm0.code"
                                            :label.sync="ruleForm0.codeName">
                                        </select-para>
                                    </el-form-item>
                                    <el-form-item prop="perd" label="密码有效期：">
                                        <select-para :options="sysParaObj['PASS_PERD']" v-model="ruleForm0.perd"
                                            :label.sync="ruleForm0.perdName">
                                        </select-para>
                                    </el-form-item>
                                    <el-form-item prop="passw" label="默认密码：">
                                        <el-input v-model="ruleForm0.passw"></el-input>
                                    </el-form-item>
                                    <el-form-item label="密码长度：">
                                        <el-row>
                                            <el-col :span="11">
                                                <el-input v-model="ruleForm0.minLen"
                                                    oninput="value = value.replace(/[^0-9]/g,'')"></el-input>
                                            </el-col>
                                            <el-col :span="2">&nbsp;—&nbsp;</el-col>
                                            <el-col :span="11">
                                                <el-input v-model="ruleForm0.maxLen"
                                                    oninput="value = value.replace(/[^0-9]/g,'')"></el-input>
                                            </el-col>
                                        </el-row>
                                    </el-form-item>
                                </el-form>
                                <el-button round size="small" :loading="loading" type="success" @click="saveForm0">
                                    保存设置</el-button>
                            </div>
                        </div>

                    </div>
                    <div class="info-wrap">
                        <div style="display:flex;justify-content:space-between">
                            <div class="info-title">企业登录IP限制</div>
                            <span style="line-height: 30px;cursor:pointer" v-if="show2" @click="show2=!show2">
                                收起
                                <i class="icon el-icon-caret-top "></i>
                            </span>
                            <span style="line-height: 30px;cursor:pointer" v-else @click="show2=!show2">
                                展开
                                <i class="icon el-icon-caret-bottom"></i>
                            </span>

                        </div>
                        <div class="info-sub-til">企业管理员可以设置登录IP限制规则，只有指定的IP才可以登录系统，保障企业安全</div>
                        <div v-show="show2">
                            <div class="info-cont">
                                <el-form label-width="0px">
                                    <!-- ipList -->
                                    <el-form-item>
                                        <el-row>
                                            <div v-for="(item, index) in ruleForm2.ipList" :key="index">
                                                <el-col :span="23">
                                                    <el-input @change="inputEmail($event,item)" v-model="item.ipstr"
                                                        style="margin-bottom:10px"></el-input>
                                                </el-col>
                                                <el-col :span="1" class="iconfresh" v-if="index!==0">
                                                    <i class="icon el-icon-delete" style="cursor: pointer"
                                                        @click="deleteEmail(index)"></i>
                                                </el-col>
                                            </div>
                                        </el-row>
                                        <p class="info-sub-til">企业成员仅能在如下IP或IP段登录</p>
                                        <el-button type="text" size="mini" icon="el-icon-plus" @click="addIpLine">添加IP
                                        </el-button>
                                    </el-form-item>
                                    <!-- userList -->
                                    <el-form-item>
                                        <select-user v-model="ruleForm2.userList" :label.sync="ruleForm2.userListName"
                                            multiple>
                                        </select-user>
                                        <p class="info-sub-til">以上白名单员工不受上述IP限制</p>
                                    </el-form-item>
                                </el-form>
                                <el-button round size="small" type="success" :loading="loading" @click="saveForm2">保存设置
                                </el-button>
                            </div>
                        </div>

                    </div>
                    <div class="info-wrap">

                        <div style="display:flex;justify-content:space-between">
                            <div class="info-title">登录安全设置</div>
                            <span style="line-height: 30px;cursor:pointer" v-if="show3" @click="show3=!show3">
                                收起
                                <i class="icon el-icon-caret-top "></i>
                            </span>
                            <span style="line-height: 30px;cursor:pointer" v-else @click="show3=!show3">
                                展开
                                <i class="icon el-icon-caret-bottom"></i>
                            </span>

                        </div>
                        <div class="info-sub-til">
                            为了保证企业和成员信息的安全，企业所有者可以设置全员的登录失效规则,设置后在下次登录后生效
                        </div>
                        <div v-show="show3">

                            <div class="info-cont">
                                <el-form label-width="0px" :model="ruleForm3" :rules="rule3" ref="form3">
                                    <el-form-item>
                                        <el-row>
                                            <el-radio v-model="ruleForm3.type" label="WCZ">
                                                <span>无操作</span>
                                                <el-input oninput="value = value.replace(/[^0-9]/g,'')"
                                                    :disabled="ruleForm3.type=='TCLLQCK'" style="width:100px"
                                                    v-model="ruleForm3.DAY"></el-input>天<el-input
                                                    oninput="value = value.replace(/[^0-9]/g,'')" style="width:100px"
                                                    :disabled="ruleForm3.type=='TCLLQCK'" v-model="ruleForm3.HOUR">
                                                </el-input>小时后，重新登录
                                            </el-radio>
                                        </el-row>
                                        <el-row>
                                            <el-radio v-model="ruleForm3.type" label="TCLLQCK">
                                                退出浏览器窗口后，用户重新登录
                                            </el-radio>
                                        </el-row>
                                    </el-form-item>

                                </el-form>
                                <el-button round size="small" type="success" @click="saveForm3">保存设置</el-button>
                            </div>
                        </div>

                    </div>
                    <div class="info-wrap">

                        <div style="display:flex;justify-content:space-between">
                            <div class="info-title">邀请全员重置密码</div>
                            <span style="line-height: 30px;cursor:pointer" v-if="show4" @click="show4=!show4">
                                收起
                                <i class="icon el-icon-caret-top "></i>
                            </span>
                            <span style="line-height: 30px;cursor:pointer" v-else @click="show4=!show4">
                                展开
                                <i class="icon el-icon-caret-bottom"></i>
                            </span>

                        </div>
                        <div class="info-sub-til">设置后，所有成员将收到机器人通知需要重置密码，同时也会收到邀请重置密码的短信和邮件</div>
                        <div v-show="show4">

                            <div class="info-cont">
                                <el-form label-width="150px" :model="ruleForm4" :rules="rule4" ref="form4">
                                    <el-form-item prop="resetType" label="密码重置提醒类型">
                                        <select-para :options="sysParaObj['SP_APASSWORD_RULE']"
                                            v-model="ruleForm4.resetType" :label.sync="ruleForm4.resetTypeName">
                                        </select-para>
                                    </el-form-item>

                                </el-form>
                                <el-button round size="small" type="success" :loading="loading" @click="saveForm4">
                                    发送邀请
                                </el-button>
                            </div>
                        </div>

                    </div>
                    <div class="info-wrap">

                        <div style="display:flex;justify-content:space-between">
                            <div class="info-title">操作日志记录设置</div>
                            <span style="line-height: 30px;cursor:pointer" v-if="show5" @click="show5=!show5">
                                收起
                                <i class="icon el-icon-caret-top "></i>
                            </span>
                            <span style="line-height: 30px;cursor:pointer" v-else @click="show5=!show5">
                                展开
                                <i class="icon el-icon-caret-bottom"></i>
                            </span>

                        </div>
                        <div class="info-sub-til">可以通过设置，调整操作日志的输出范围</div>
                        <div v-show="show5">

                            <div class="info-cont" style="width:100%">
                                <el-form label-width="100px" :model="ruleForm5" :rules="rule5" ref="form5">
                                    <el-form-item label="操作日志" prop="logType">
                                        <select-para style="width:300px" :options="sysParaObj['SP_OPE_RESET']"
                                            v-model="ruleForm5.logType" :label.sync="ruleForm5.logTypeName">
                                        </select-para>
                                        <comm-checkbox :options="sysParaObj['SP_SOPE_TYPE']" v-model="ruleForm5.logFun"
                                            :label.sync='ruleForm5.logFunName' multiple></comm-checkbox>
                                    </el-form-item>
                                </el-form>
                                <el-button round size="small" type="success" :loading="loading" @click="saveForm5">
                                    保存设置
                                </el-button>
                            </div>
                        </div>

                    </div>
                </el-tab-pane>
                <el-tab-pane label="登录日志" name="3" lazy>
                    <loginLog ref="loginLog" :showexport="true"></loginLog>
                </el-tab-pane>
                <el-tab-pane label="操作日志" name="4" lazy>
                    <operateLog ref="operateLog" :showexport="true"></operateLog>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
    import vcode from '@/components/vcode';
    import {
        savePassRule,
        queryPassRule,
        sendResetInvite
    } from "./service.js";
    import selectPara from '@/components/selectPara';
    import commCheckbox from '@/components/commCheckbox';
    import {
        mapState
    } from 'vuex';
    import baseInfo from './accountSet/baseInfo'
    import operateLog from './accountSet/operateLog'
    import loginLog from './accountSet/loginLog'
    import selectUser from '@/components/selectUser';
    import {
        commPara
    } from '@/mixins/mixins'
    export default {
        name: 'accountSet',
        components: {
            vcode,
            baseInfo,
            operateLog,
            loginLog,
            selectPara,
            commCheckbox,
            selectUser
        },
        mixins: [commPara],
        data() {
            return {
                show1: true,
                show2: false,
                show3: false,
                show4: false,
                show5: false,
                sawtype1: true,
                sawtype2: true,
                ruleForm2: {
                    ipList: [{
                        ipstr: ''
                    }],
                    userList: [],
                    userListName: []
                },
                ruleForm0: {
                    code: '',
                    codeName: '',
                    perd: '',
                    perdName: '',
                    passw: '',
                    minLen: '',
                    maxLen: '',
                },
                rule0: {
                    code: [{
                        required: true,
                        message: '请选择密码规则',
                        trigger: 'blur'
                    }],
                    perd: [{
                        required: true,
                        message: '请选择密码有效期',
                        trigger: 'blur'
                    }],
                    passw: [{
                        required: true,
                        message: '请输入默认密码',
                        trigger: 'blur'
                    }, {
                        min: 6,
                        max: 30,
                        message: '长度限制6-30位',
                        trigger: 'blur'
                    }],

                },
                ruleForm4: {
                    resetType: '',
                },
                rule4: {
                    resetType: [{
                        required: true,
                        message: '请选择密码重置提醒类型',
                        trigger: 'blur'
                    }],
                },
                ruleForm3: {
                    type: 'WCZ',
                    HOUR: '',
                    DAY: ''
                },
                rule3: {

                },
                ruleForm5: {
                    logType: '',
                    logFun: []
                },
                rule5: {
                    logType: [{
                        required: true,
                        message: '请选择日志记录类型',
                        trigger: 'blur'
                    }],
                },
                sysParaObj: {
                    'PASS_CODE': [],
                    'PASS_PERD': [],
                    'SP_APASSWORD_RULE': [],
                    'SP_SOPE_TYPE': [],
                    'SP_OPE_RESET': []
                },
                activeName: '1',
                loading: false,
                ruleForm: {
                    id: '', // 主键
                },
            }
        },
        mounted() {
            this.queryDetail()
        },
        watch: {
            'ruleForm3.type': {
                handler: function () {
                    this.ruleForm3.HOUR = ''
                    this.ruleForm3.DAY = ''
                },
            }
        },
        computed: {

            ...mapState({
                token: state => state.token.token,
                userid: state => state.token.userid
            }),

        },
        methods: {
            addIpLine() {
                let obj = {
                    ipstr: ''
                }
                if (this.ruleForm2.ipList[this.ruleForm2.ipList.length - 1].ipstr != '') {
                    this.ruleForm2.ipList.push(obj)
                } else {
                    this.$notify({
                        title: '提示',
                        type: 'error',
                        message: '请输入ip地址'
                    })
                }

            },
            deleteEmail(index) {
                this.ruleForm2.ipList.splice(index, 1)
            },
            inputEmail(value, value2) {
                if (value) {

                    var reg =
                        /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/;
                    if (!reg.test(value)) {
                        value2.ipstr = ''
                        this.$notify({
                            title: "提示",
                            message: "格式错误",
                            type: "error"
                        });
                    }

                }
            },

            changetype() {
                this.ruleForm3 = {
                    HOUR: '',
                    DAY: ''
                }
            },
            saveForm5() {
                this.$refs.form5.validate(valid => {
                    if (valid) {
                        let params = {
                            id: this.ruleForm.id, // 主键
                            code: this.ruleForm0.code,
                            perd: this.ruleForm0.perd,
                            passw: this.ruleForm0.passw,
                            minLen: this.ruleForm0.minLen,
                            maxLen: this.ruleForm0.maxLen,
                            logType: this.ruleForm5.logType,
                            logFun: this.ruleForm5.logFun.join(','),
                            saveType: 'CZRZJLSZ',
                        }
                        this.loading = true
                        savePassRule(params).then(res => {
                            if (res.data.code == 1000) {
                                this.$notify({
                                    title: '提示',
                                    type: 'success',
                                    message: '修改成功！'
                                })
                                this.queryDetail()
                            }
                            this.loading = false
                        })
                    }
                })
            },
            saveForm4() {
                this.$refs.form4.validate(valid => {
                    if (valid) {
                        let params = {
                            resetType: this.ruleForm4.resetType
                        }
                        this.loading = true
                        sendResetInvite(params).then(res => {
                            if (res.data.code == 1000) {
                                this.$notify({
                                    title: '提示',
                                    type: 'success',
                                    message: '发送成功！'
                                })
                                this.queryDetail()
                            }
                            this.loading = false
                        })
                    }
                })
            },
            saveForm3() {

                let params = {
                    id: this.ruleForm.id, // 主键
                    code: this.ruleForm0.code,
                    perd: this.ruleForm0.perd,
                    passw: this.ruleForm0.passw,
                    minLen: this.ruleForm0.minLen,
                    maxLen: this.ruleForm0.maxLen,
                    logonInstall: this.ruleForm3,
                    saveType: 'DLANSZ',
                }
                this.loading = true
                savePassRule(params).then(res => {
                    if (res.data.code == 1000) {
                        this.$notify({
                            title: '提示',
                            type: 'success',
                            message: '修改成功！'
                        })
                        this.queryDetail()
                    }
                    this.loading = false
                })

            },
            saveForm2() {
                let iplist = []
                for (let i = 0; i < this.ruleForm2.ipList.length; i++) {
                    iplist.push(this.ruleForm2.ipList[i].ipstr)
                }
                let params = {
                    id: this.ruleForm.id, // 主键
                    code: this.ruleForm0.code,
                    perd: this.ruleForm0.perd,
                    passw: this.ruleForm0.passw,
                    minLen: this.ruleForm0.minLen,
                    maxLen: this.ruleForm0.maxLen,
                    ipList: iplist.join(),
                    saveType: 'QYDLIPXZ',
                    userList: this.ruleForm2.userList.join()
                }
                this.loading = true
                savePassRule(params).then(res => {
                    if (res.data.code == 1000) {
                        this.$notify({
                            title: '提示',
                            type: 'success',
                            message: '修改成功！'
                        })
                        this.queryDetail()
                    }
                    this.loading = false
                })

            },
            saveForm0() {
                let params = {
                    id: this.ruleForm.id, // 主键
                    code: this.ruleForm0.code,
                    perd: this.ruleForm0.perd,
                    passw: this.ruleForm0.passw,
                    minLen: this.ruleForm0.minLen,
                    maxLen: this.ruleForm0.maxLen,
                    saveType: 'MMGZSZ'
                }
                this.loading = true
                savePassRule(params).then(res => {
                    if (res.data.code == 1000) {
                        this.$notify({
                            title: '提示',
                            type: 'success',
                            message: '修改成功！'
                        })
                        this.queryDetail()
                    }
                    this.loading = false
                })

            },
            tabclick(val) {
                if (val.name == '1') {
                    this.queryDetail()
                } else if (val.name == '3') {
                    this.$refs.loginLog.clickQuery()
                } else if (val.name == '4') {
                    this.$refs.operateLog.clickQuery()
                }

            },
            queryDetail() { // 用户明细
                this.ruleForm5.logFun = []
                this.ruleForm2.ipList = []
                // this.ruleForm2.userList = []
                queryPassRule().then(res => {
                    if (res.data.code == 1000) {
                        let data = res.data.data;
                        if (data) {
                            this.ruleForm.id = data.id;
                            this.ruleForm0.code = data.code
                            this.ruleForm0.perd = data.perd
                            this.ruleForm0.passw = data.passw
                            this.ruleForm0.minLen = data.minLen
                            this.ruleForm0.maxLen = data.maxLen
                            if (data.logonInstall) {
                                this.ruleForm3 = JSON.parse(data.logonInstall)
                            }
                            this.ruleForm4.resetType = data.resetType
                            this.ruleForm5.logType = data.logType
                            if (this.ruleForm5.logFun) {
                                this.ruleForm5.logFun = data.logFun.split(',')
                            }
                            if (this.ruleForm2.ipList) {
                                this.ruleForm2.ipList = data.ipList.split(',').map((i) => {
                                    return {
                                        ipstr: i
                                    }
                                })
                            }
                            if (this.ruleForm2.userList) {
                                this.ruleForm2.userList = data.userList.split(',')
                            }


                        }
                    }
                })
            },

        }
    }

</script>

<style lang="scss">
    .czword {
        text-decoration: underline;
        cursor: pointer;
    }

    .el-button.disabled-style {
        background-color: #EEEEEE;
        color: #CCCCCC;
    }

    .info-wrap {
        padding: 10px 20px;
        border-bottom: 1px solid #e7dfdf;

        .info-title {
            line-height: 35px;
            font-weight: 600;
        }

        .info-sub-til {
            font-size: 12px;
            color: #999;
        }

        .info-cont {
            padding: 10px 0;
            width: 400px;
        }
    }

</style>
